<template>
  <div class="hot_game_list" :style="{
    gridTemplateColumns: getGridColumns(),
    gap: props.type == 1 ? '1px' : '8px'
  }">
    <div class="all_game" v-for="(gameItem, index) in props.games" :key="index"
      :style="{ width: gameWidth + 'px', height: gameHeight + 'px' }">
      <template v-if="props.type == 3 || props.type == 4" >
        <div @click="toGameDetail(gameItem)">
          <div class="game_hot" v-if="gameItem.is_hot === 1">
            <iconpark-icon name="hot" size=".8rem"></iconpark-icon>
            <span>HOT</span>
          </div>
          <img class="bg_img" :src="`${settings.backend_upload}${gameItem.tournm_logo}`" alt=""
            :style="{ width: gameWidth + 'px', height: (gameHeight - 26) + 'px' }" />
          <!-- <iconpark-icon class="collect_img" v-if="hasLogin"
            :name="allCollected.includes(gameItem.id) ? 'shoucang-sel' : 'shoucang-def'" size="1rem"
            @click.stop="reqCollect(gameItem, allCollected)"></iconpark-icon> -->
          <div class="game_name">
            {{ gameItem.tournm_name }}
          </div>
        </div>
        <!-- 遮罩 -->
        <!-- <div v-if="gameItem.is_maintain === 1" class="masking_layer">
          <iconpark-icon class="maskin_img" name="padlock1" size="28" />
          <span>{{ t('inside_page_game_coming_soon') }}</span>
          <span>{{ t('inside_page_game_stay_tuned') }}</span>
        </div> -->
      </template>
      <template v-else>
        <div @click="toGameDetail(gameItem)">
          <div class="game_hot" v-if="gameItem.is_hot === 1">
            <iconpark-icon name="hot" size=".8rem"></iconpark-icon>
            <span>HOT</span>
          </div>
          <img class="bg_img" :src="`${settings.backend_upload}${gameItem.gamePictureH5}`" alt=""
            :style="{ width: gameWidth + 'px', height: (gameHeight - 26) + 'px' }" />

          <iconpark-icon class="collect_img" v-if="hasLogin"
            :name="allCollected.includes(gameItem.id) ? 'shoucang-sel' : 'shoucang-def'" size="1rem"
            @click.stop="reqCollect(gameItem, allCollected)"></iconpark-icon>
          <div class="game_name">
            {{ unserialize(gameItem.name, true) }}
          </div>
        </div>
        <!-- 遮罩 -->
        <div v-if="gameItem.ismMintain === 1" class="masking_layer">
          <iconpark-icon class="maskin_img" name="padlock1" size="28" />
          <span>{{ t('inside_page_game_coming_soon') }}</span>
          <span>{{ t('inside_page_game_stay_tuned') }}</span>
        </div>
      </template>

    </div>

  </div>
</template>


<script setup lang="ts">
import { defineProps, onBeforeMount } from 'vue';
import { i18n } from '@/languages';
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import { Page } from '@/store/page';
import { reqCollect } from '@/utils/useNetMethods';
import pinia from '@/store';
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';
import { useRouter } from "vue-router";
const router = useRouter();
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { hasLogin, allCollected } = storeToRefs(User(pinia));

const { lang, settings } = storeToRefs(Page(pinia));

// 接收传入的 props
const props: any = defineProps({
  games: {
    type: Array,
    required: true,
  },
  type: {
    type: Number,
    default: 2,
  },
  gameWidth: {
    type: Number,
    default: 82,
  },
  gameHeight: {
    type: Number,
    default: 108,
  },
  defaultImage: {
    type: String,
    default: '/imgs/home/cunkuan.png',
  },
});



// 动态设置列数
const getGridColumns = () => {
  // console.log('props.games', props.games)
  return 'repeat(4, 1fr)';
  // if (props.type === 1) {
  //   return 'repeat(4, 1fr)';
  // } else if (props.type === 2) {
  //   return 'repeat(2, 1fr)';
  // } else {
  //   return 'repeat(4, 1fr)'; 
  // }
};

// watch(
//   () => props.type,
//   (newId) => {
//     nextTick(() => {
//       console.log('Type类型', newId)
//     })
//   },
//   { immediate: true }
// )

// 判读是否是进入游戏二级页或者直接进入游戏
const toGameDetail = async (item: any) => {
  if (item.has_next == 1) {
    // 跳转二级页面
    router.push({
      path: 'gameDetail',
      query: {
        agent_id: item.id,
        venue_id: item.three_game_kind[0].id,
        name: item.name[lang.value].toUpperCase(),
      }
    })
  } else {
    onPlayGame(item)
  }
}

onBeforeMount(() => {
  i18n.global.locale.value = lang.value
})
</script>


<style lang="scss" scoped>
.hot_game_list {
  width: 347px;
  margin: 0 auto;
  display: grid;
  gap: 1px;

  .all_game {
    width: 82px;
    height: 108px;
    margin-right: 6px;
    margin-bottom: 6px;
    background: #1A1944;
    border-radius: 8px;
    position: relative;

    .game_hot {
      // width: 38px;
      height: 15px;
      position: absolute;
      padding: 0 8px 0 4px;
      left: 0px;
      top: 0px;
      z-index: 9;
      background: url(/imgs/home/is_hot.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;

      .game_hot_icon {
        width: 8px;
        height: 10px;
        margin: 0 2px;
      }

      span {
        color: #FFFFFF;
        font-size: 8px;
        font-family: PingFang SC;
      }
    }

    .bg_img {
      width: 82px;
      height: 82px;
    }

    .game_name {
      width: 90%;
      margin-top: 0px;
      text-align: center;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

    .collect_img {
      position: absolute;
      top: 4px;
      right: 4px;
    }

    .masking_layer {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(1px);
      background: rgba(0, 0, 0, 0.6);
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
      color: #ffffff;

      .maskin_img {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
